<template>
    <div class="message">
        <view v-if="historylist.length==0" class="page_dcenter_null">
            <img class="page_dcenter_null_img" src="../../../static/img_null_bookbuilding.png" />
            <view>暂无记录</view>
        </view>
        <scroll-view scroll-y class="pagses">
            <div
                :class="item.status ==1?'ms_catN':'ms_cat'"
                @click="itemClick(item)"
                v-for="(item, index) in historylist"
                :key="index"
            >
                <div class="ms_title">
                    <div class="ms_title_l">
                        <span class="red">第{{item.name}}次产检</span>
                        <span>孕{{item.beginWeek}}-{{item.endWeek}}周</span>
                    </div>
                    <div class="ms_title_r">
                        <span>{{timepus(item)}}</span>
                    </div>
                </div>
                <div class="ms_body">
                    <div class="ms_body_c">【产检项目】{{item.summary}}</div>
                    <div class="ms_body_l"></div>
                </div>
                <div class="ms_butn">
                    <div class="ms_butn_c red">{{getperiod(item.status)}}</div>
                </div>
            </div>
        </scroll-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isshou: "1",
            items: 10,
            message: "消息",
            historylist: [],
        };
    },
    mounted() {
        var _this = this;
        _this.getList();
    },
    methods: {
         timepus(time){
           if(time){
              return time.productionTime?time.productionTime.substring(0, 10):time.remindTime.substring(0, 10)
           }else{
               return ''
           }
        },
        getperiod(val) {
            var a = "";
            switch (val) {
                case 0:
                    a = "已过期";
                    break;
                case 1:
                    a = "已产检";
                    break;
                case 2:
                    a = "待产检";
                    break;
                case 3:
                    a = "未产检";
                    break;
                default:
                    a = "";
            }
            return a;
        },
        getList() {
            const data = {
                pageNum: 1,
                pageSize: 10000,
            };
            var _this = this;
            _this.$ajaxs
                .get("/mobile/v1/roundPregnant/getRoundPregnantList", data)
                .then((res) => {
                    if (res.status == 200) {
                        _this.historylist = res.content.list;
                    } else {
                        uni.showToast({
                            title: "请检查网络~",
                            icon: "none",
                        });
                    }
                })
                .catch((err) => reject(err));
        },
        itemClick(itme) {
            uni.navigateTo({
                url: "/pages/service/schedule/messageDetails/messageDetails?id=" + itme.id,
                animationType: "pop-in",
                animationDuration: 200,
            });
        },
    },
};
</script>

<style scoped lang="scss">
.message {
    // background: #f8f8f8;
    .page_dcenter_null {
        padding-top: 180upx;
        text-align: center;
        .page_dcenter_null_img {
            height: 180upx;
            width: 162upx;
        }
        div {
            color: #999;
            font-size: 28upx;
            height: 40upx;
            line-height: 40upx;
        }
    }
    .pagses {
        padding-bottom: 110upx;
        .ms_cat {
            background: #fff;
            border-top: 20upx solid #f8f8f8;
            color: #333;
            .ms_title {
                height: 60upx;
                line-height: 60upx;
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                padding: 0 40upx;
                border-bottom: 1px solid #ddd;
                .ms_title_l {
                    -webkit-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    align-items: center;
                    justify-content: center;
                    vertical-align: middle;
                    .red {
                        color: #fa4d93;
                    }
                    span:nth-of-type(1) {
                        margin-right: 30upx;
                    }
                }
                .ms_title_r {
                    -webkit-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    align-items: center;
                    justify-content: center;
                    vertical-align: middle;
                    text-align: right;
                }
            }
            .ms_body {
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                padding: 40upx;
                border-bottom: 1px solid #ddd;
                .ms_body_c {
                    -webkit-box-flex: 0 0 90%;
                    -ms-flex: 0 0 90%;
                    flex: 0 0 90%;
                    vertical-align: middle;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }
                .ms_body_l {
                    -webkit-box-flex: 0 0 10%;
                    -ms-flex: 0 0 10%;
                    flex: 0 0 10%;
                    // width: 10upx;
                    vertical-align: middle;
                    position: relative;
                }
                .ms_body_l::after {
                    content: "";
                    position: absolute;
                    top: 50%;
                    margin-top: -7upx;
                    width: 14upx;
                    height: 14upx;
                    left: 40upx;
                    border-top: 2px solid #666;
                    border-right: 2px solid #666;
                    transform: rotate(45deg);
                }
            }
            .ms_butn {
                height: 60upx;
                line-height: 60upx;
                .ms_butn_c {
                    text-align: right;
                    padding-right: 40upx;
                }
                .red {
                    color: #fa4d93;
                }
            }
        }
        .ms_catN {
            background: #fff;
            border-top: 20upx solid #f8f8f8;
            color: #999;
            .ms_title {
                height: 60upx;
                line-height: 60upx;
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                padding: 0 40upx;
                border-bottom: 1px solid #ddd;
                .ms_title_l {
                    -webkit-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    align-items: center;
                    justify-content: center;
                    vertical-align: middle;
                    // .red {
                    //     color: #fa4d93;
                    // }
                    span:nth-of-type(1) {
                        margin-right: 30upx;
                    }
                }
                .ms_title_r {
                    -webkit-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    align-items: center;
                    justify-content: center;
                    vertical-align: middle;
                    text-align: right;
                }
            }
            .ms_body {
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                padding: 40upx;
                border-bottom: 1px solid #ddd;
                .ms_body_c {
                    -webkit-box-flex: 0 0 90%;
                    -ms-flex: 0 0 90%;
                    flex: 0 0 90%;
                    vertical-align: middle;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }
                .ms_body_l {
                    -webkit-box-flex: 0 0 10%;
                    -ms-flex: 0 0 10%;
                    flex: 0 0 10%;
                    // width: 10upx;
                    vertical-align: middle;
                    position: relative;
                }
                .ms_body_l::after {
                    content: "";
                    position: absolute;
                    top: 50%;
                    margin-top: -7upx;
                    width: 14upx;
                    height: 14upx;
                    left: 40upx;
                    border-top: 2px solid #999;
                    border-right: 2px solid #999;
                    transform: rotate(45deg);
                }
            }
            .ms_butn {
                height: 60upx;
                line-height: 60upx;
                .ms_butn_c {
                    text-align: right;
                    padding-right: 40upx;
                }
            }
        }
    }
}
</style>